<template>
    <div class="gallery_drawing">
      <div align="left" class="gallery-van-tab-a">
        <div class="gallery-van-tab-aa gallery-van-tab-aa-block" v-for="item in drawingList">
          <van-image :src="item.galleryInfoPic" fit="cover" height="10rem" width="10rem" @click="showOverlay(item.galleryInfoId,item.courseType)"></van-image>
          <div class="gallery-van-tab-a-content">
            <div>
              <p align="left" style="font-size: 0.8rem;margin: 0;padding: 0.2rem 0">{{item.galleryInfoTitle}}</p>
            </div>
            <div align="left" class="gallery-van-tab-b-contents">
              <div class="van-tab-b-contents">
                <van-image round width="1.2rem" height="1.2rem" :src="item.licenseUrl" style="position: absolute;"/>
                <span style="font-size: 0.4rem;margin-left: 1.5rem">{{item.shopsName}}</span>
              </div>
              <div class="van-tab-b-contents">

<!--                <img class="imgaa" src="../../../assets/xin.png" />-->
                <van-icon v-if="item.courseType == 0" name="star-o" style="position: absolute" size="18"/>
                <van-icon v-else="item.courseType == 1" style="position: absolute">
                  <img class="imgaa" src="../../../assets/wujiaoxin.png" />
                </van-icon>

                <span class="block-list-likes" style="font-size: 0.8rem;margin-left: 1.2rem">{{item.shoucangshu}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>


      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block-text">
            <div class="block-text-share" align="left" style="padding: 0.5rem">
              <van-icon @click="fanhui" name="arrow-left" size="20" color="#ffffff"/>

            </div>
            <div class="block-text-img">
<!--              <van-image :src="this.drawing.galleryInfoPic" fit="cover" width="100%" height="12rem"  @click="show = true"></van-image>-->
              <img :src="this.drawing.galleryInfoPic" width="100%" height="12rem" @click="show = true" />
            </div>
            <div class="block-text-content" align="left">
              <div class="block-text-content-p">
                <p>{{this.drawing.galleryInfoText}}</p>
              </div>


              <div class="block-text-content-cen">
                <van-row span="8">
                  <van-col span="14">
                    <van-field v-model="value" placeholder="添加评论......" @keyup.enter="insertComment" class="block-text-content-cen-input"/>
                  </van-col>
                  <van-col span="8">
                    <van-row>
                      <van-col span="8">
                        <div align="center" style="padding-top: 0.3rem">
<!--                          <div><van-icon name="like-o" color="#ffffff" size="16"/></div>-->
<!--                          <div style="font-size: 1rem">{{this.drawing.galleryInfoFabulous}}</div>-->
                        </div>
                      </van-col>
                      <van-col span="8">
                        <div align="center" style="padding-top: 0.3rem">
                          <div @click="shoucang">
                            <van-icon v-if="this.courseTypeOne == 0" name="star-o" color="#ffffff" size="26"/>
                            <van-icon v-else="this.courseTypeOne == 1" color="#ffffff" size="5">
                              <img class="imgbb" src="../../../assets/wujiaoxin.png" />
                            </van-icon>
                          </div>
                          <div style="font-size: 1rem">{{this.drawing.shoucangshu}}</div>
                        </div>
                      </van-col>
                      <van-col span="8">
                        <div align="center" style="padding-top: 0.3rem" @click="showPopup">
                          <div><van-icon  name="chat-o" color="#ffffff" size="26"/></div>
                          <div style="font-size: 1rem">{{this.drawing.galleryInfoReply}}</div>
                        </div>
                      </van-col>
                    </van-row>
                  </van-col>
                </van-row>
              </div>
            </div>


          </div>
        </div>
      </van-overlay>
      <van-popup v-model="showP" closeable close-icon="close" position="bottom" round :style="{ height: '60%' }">
        <div class="block-share">
          <div class="block-share-top">
            <p>全部评论{{this.galleryComment.length}}条</p>
          </div>

          <div class="block-share-list">
            <div class="block-share-list-demo" v-for="comment in galleryComment">
              <img width="375" height="375" :src="comment.customerInfo.customerHandImage">
              <div class="list-demo-content">
                <div>
                  <h3>{{comment.customerInfo.customerName}}</h3>
                  <p>{{comment.galleryCommentTime}}</p>
                </div>
                <p style="width: 70%;font-size: 0.7rem">{{comment.galleryCommentText}}</p>
              </div>
              <div class="block-share-list-like">
              </div>
            </div>
          </div>

          <div class="block-share-bottom">
            <van-cell-group>
              <van-field v-model="commentText" clearable label="" left-icon="edit" placeholder="评论一下~" center style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem" @keyup.enter="addComment" @click-left-icon="addComment"/>
            </van-cell-group>
          </div>
        </div>
      </van-popup>
    </div>
</template>

<script>

  import { collectadd } from "@/api/collection";

  import { Toast } from "vant";
  import {
    selectGalleryInfoListByTypeOne,
    selectGalleryList,
    selectGalleryById,
    selectGalleryComment,
    insertGalleryComment
  } from "@/api/gallery/gallery.js";

  export default {
    name: "gallery_drawing",
    inject:['reload'],
    data(){
      return{
        form:{
          galleryInfoId:'',
        },
        courseTypeOne:'',
        show: false,
        value: '',
        showP: false,
        drawing: Object,
        galleryId: '',
        commentText:'',
        galleryComment: [],
        drawingList : [],
      }
    },
    created() {
      this.getGalleryList();
    },
    methods: {

      fanhui(){
        // this.$router.go(-1);//返回上一层
        this.show = false;
      },

      /**
       * 获取微信分享通道
       */
      updateSerivces() {
        let _this = this;
        plus.share.getServices(function (s) {
          _this.shares = {};
          for (var i in s) {
            var t = s[i];
            _this.shares[t.id] = t;
          }
          _this.sweixin = _this.shares['weixin'];
          _this.sqq = _this.shares['qq'];
          _this.sinaweibo = _this.shares['sinaweibo'];
        }, function (e) {
          plus.nativeUI.alert('获取分享服务列表失败：' + e.message);
        });
      },
      //第三方分享
      share(a) {
        let _this = this;

        if(a == 'weixin'){
          let msg = {
            type: 'web', //分享的内容的类型
            title: '淘小建自建房平台美图太赞了,分享给你',
            content: this.drawing.galleryInfoTitle,
            thumbs: [this.drawing.galleryInfoPic],
            href: 'http://51jhf.com/txj/#/gallery_index?carouselArea=',
            extra: {
              scene: "WXSceneSession"
            } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
          }
          plus.nativeUI.actionSheet({
            title: '分享到微信',
            cancel: '取消',
            buttons: _this.buttons,
          }, function (e) {
            (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
          })
        }
      },

      /**
       * 触发分享
       */
      sharePage(srv, msg, button) {
        let _this = this;
        // plus.nativeUI.alert('分享操作：');
        if (!srv) {
          plus.nativeUI.alert('无效的分享服务！');
          return;
        }
        button && (msg.extra = button.extra);
        // 发送分享
        if (srv.authenticated) {
          // plus.nativeUI.alert('---已授权---');
          _this.doShare(srv, msg);
        } else {
          // plus.nativeUI.alert('---未授权---');
          srv.authorize(function () {
            _this.doShare(srv, msg);
          }, function (e) {
            plus.nativeUI.alert('认证授权失败：' + JSON.stringify(e));
          });
        }
      },
      /**
       * 开始分享
       */
      doShare(srv, msg) {
        let _this = this;
        srv.send(msg, function () {
          plus.nativeUI.alert('分享到"' + srv.description + '"成功！');
        }, function (e) {
          plus.nativeUI.alert('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
        });
      },


      shoucang(){
        this.form.galleryInfoId = this.galleryId;
        collectadd(this.form).then(res=>{
          this.getGalleryList();
        })
        this.show = false;
      },

      getGalleryList(){
        // selectGalleryList("0").then((res) => {
        //   this.drawingList = res.data.data;
        // });
        selectGalleryInfoListByTypeOne().then(res=>{
          this.drawingList = res.data.rows;
        })
      },
      showOverlay(galleryInfoId,courseType){
        this.courseTypeOne = courseType
        this.show = true;
        selectGalleryById(galleryInfoId).then((res) => {
          this.galleryId = res.data.data.galleryInfoId;
          this.drawing = res.data.data.galleryInfo;
        });
      },
      showPopup() {
        this.showP = true;
        selectGalleryComment(this.galleryId).then((res) => {
          this.galleryComment = res.data.data;
        });
      },
      toText(){
        this.$router.push({ path:'/original_text',query:{galleryInfoId:this.galleryId}})
      },
      /** 添加评论 */
      addComment(){
        insertGalleryComment(this.galleryId,this.commentText).then((res) =>{
          if(res.code == 500){
            Toast("评论失败");
          }else{
            Toast("评论成功");
            this.reload();
          }
        })
      },
      insertComment(){
        insertGalleryComment(this.galleryId,this.value).then((res) =>{
          if(res.code == 500){
            Toast("评论失败");
          }else{
            Toast("评论成功");
            this.reload();
          }
        })
      }
    }
  }
</script>

<style scoped>
  .imgaa{
    width: 1.2rem;
    height: 1.2rem;
  }
  .imgbb{
    width: 1.6rem;
    height: 1.6rem;
  }
  .gallery-van-tab-aa{
    padding-bottom: 0.5rem;
  }
  .gallery-van-tab-b-contents{
    position: relative;
  }
  .van-tab-b-contents{
    display :inline-block;
  }
  .gallery-van-tab-aa-block{
    display: inline-block;
    width: 44%;
    position: relative;
    padding : 0.5rem
  }

  .block-text-img{
    margin-top: 5rem;
  }
  .block-text-content-cen-input{
    border-radius: 5rem;
    width: 10rem;
  }
  .block-text-content{
    color: white;
    font-size: 0.6rem;
    padding: 1rem;
    position: absolute;
    width: 100%;
    bottom: 5%;
  }
  .block-text-content-p p{
    padding: 0.3rem 0;
  }

  .block-share {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
    text-align: left;
  }

  .block-share .block-share-top{
    padding-left: 1rem;
    font-weight: 700;
  }

  .block-share .block-share-bottom{
    width: 85%;
    position: fixed;
    bottom: 0rem;
    padding: 0.7rem;
    background-color: white;
  }

  .block-share .block-share-list{
    padding: 1rem 1.5rem;
  }

  .block-share .block-share-list .block-share-list-demo{
    padding: 1rem 0;
    position: relative;
  }

  .block-share .block-share-list .block-share-list-demo{
    margin-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo{
    padding-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo .block-share-list-demos img{
    width: 1rem;
    height: 1rem;
  }

  .block-share .block-share-list .block-share-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block-share .block-share-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block-share .block-share-list .list-demo-content div{
    padding-bottom: 0.5rem;
  }
  .block-share .block-share-list .list-demo-content div h3{
    font-size: 0.75rem;
  }
  .block-share .block-share-list .list-demo-content div p{
    font-size: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-like{
    display: inline-block;
  }

</style>
